<template>
	<div class="w1024-wrap">
		<div class="page">
			<div style="padding:20px 12px;">
				<el-button type="primary" size="small" @click="goBack">返回上一页</el-button>
			</div>
			<div class="table-wrap">
				<el-table height="500" ref="table" :cell-style="cellStyleMethod" size="small" :span-method="spanMethod" :data="type==1?list1:list2" style="width: 100%">
					<el-table-column prop="type" min-width="70" label="类别">
						<template slot-scope="scope">
							<b style="font-size: 16px;">{{scope.row.type}}</b>
						</template>
					</el-table-column>
					<el-table-column prop="serviceName" label="功能名称" min-width="70">
						<template slot-scope="scope">
							<b style="font-size: 14px;">{{scope.row.serviceName}}</b>
						</template>
					</el-table-column>
					<el-table-column prop="priceText" min-width="70" label="价格">
						<template slot-scope="scope">
							<p style="color: #FF4343;font-weight: bold;line-height: 24px;" v-for="item in scope.row.priceText">{{item}}</p>
						</template>
					</el-table-column>
					<el-table-column label="增值功能详解" min-width="160">
						<template slot-scope="scope">
							<p class="text-left">{{scope.row.desc}}</p>
						</template>
					</el-table-column>
					<el-table-column label="功能示例" min-width="160">
						<template slot-scope="scope">
							<p class="text-left" v-html="scope.row.example"></p>
						</template>
					</el-table-column>
					<el-table-column label="订购/功能示例" min-width="100">
						<div slot-scope="scope">
							<div class="text-center">
								<template v-if="scope.row.business_type!=1&&scope.row.business_type!=9">
									<el-button class="order-btn" v-if="openStateMap[scope.row.business_type]==2" size="mini" type="primary" @click="order(scope.row.business_type)">订购</el-button>
									<el-button class="order-btn" v-if="openStateMap[scope.row.business_type]==3" size="mini" @click="payOrder(scope.row.business_type)" type="danger">待支付</el-button>
									<el-button class="order-btn" v-if="openStateMap[scope.row.business_type]==4" size="mini" type="warning">订购中</el-button>
									<el-button class="order-btn" v-if="openStateMap[scope.row.business_type]==1" size="mini" type="success">订购成功</el-button>
								</template>
								
								<template v-else>
									<template v-for="(item,index) in scope.row.priceText">
										<el-button class="order-btn" v-if="openStateMap[scope.row.business_type][index+1]==2||openStateMap[scope.row.business_type][index+1]==1" size="mini" type="primary" @click="order(scope.row.business_type,index)">订购({{item}})</el-button>
										<el-button class="order-btn" v-if="openStateMap[scope.row.business_type][index+1]==3" @click="payOrder(scope.row.business_type,index)" size="mini" type="danger">待支付({{item}})</el-button>
										<el-button class="order-btn" v-if="openStateMap[scope.row.business_type][index+1]==4" size="mini" type="warning">订购中({{item}})</el-button>
									</template>
									
									<!--<span class="order-btn" @click="order(scope.row.business_type,index)" v-for="(item,index) in scope.row.priceText">订购({{item}})</span>-->
								</template>
							</div>
							
						</div>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<el-dialog :title="'新建'+bussinessList[obj.business_type-1]" :visible.sync="editVisible" width="600px">
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title">订购业务：</p>
					<div class="form-item-content">
						<span>{{bussinessList[obj.business_type-1]}}</span>
					</div>
				</div>
				<template v-if="obj.business_type!=1&&obj.business_type!=9">
					<div class="form-item" v-if="feeObj.hascoupon!=1">
						<p class="form-item-title">产品价格：</p>
						<div class="form-item-content">
							<span>{{feeObj.oldfee/100}}元/年</span>
						</div>
					</div>
					<template v-else>
						<div class="form-item">
							<p class="form-item-title" style="width:auto;color: #666;text-decoration: line-through;">标准价格：{{feeObj.oldfee/100}}元/年</p>
						</div>
						<div class="form-item">
							<p class="form-item-title" style="width:auto;color: red;">现特惠价格:{{feeObj.fee/100}}元（400开通1个月内收费{{feeObj.fee/100}}元，1个月后按标准价格收费）</p>
						</div>
					</template>
				</template>

				<template v-if="obj.business_type==2||obj.business_type==4">
					<div class="form-item">
						<p class="form-item-title">铃音文件：</p>
						<div class="form-item-content" style="width: 330px;">
							<div class="flex flex-align-center flex-justify-between">
								<el-input type="text" style="width: 180px;" placeholder="请选择铃音文件" readonly v-model="obj.ring_file_name"></el-input>
								<el-button type="primary" size="small" style="width: 140px;margin-left: 6px;" @click="selectFile">点击上传铃音文件
									<input @change="upload" accept=".mp3" type="file" ref="file" class="hide" />
								</el-button>
							</div>
							<p class="tip-info">支持扩展名：MP3</p>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">彩铃内容：</p>
						<div class="form-item-content" style="width: 330px;padding-top: 11px;">
							<el-input type="textarea" placeholder="请输入彩铃内容" rows="4" resize="none" v-model="obj.content"></el-input>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title" style="line-height: 20px;padding-top: 8px;">资质文件：<br/>(非必填)</p>
						<div class="form-item-content" style="padding-top: 8px;">
							<image-uploader ref="zz_file" :imageUrl="obj.zz_file" @success="(img)=>{imageUploadSuccess(img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
								<div class="upload-bg" v-if="!obj.zz_file">

								</div>
								<template v-if="obj.zz_file">
									<div class="operate-wrap flex flex-align-center flex-justify-arround">
										<img :src="change" @click="changeFile()" />
										<img :src="del" @click="delFile()" />
									</div>
								</template>
							</image-uploader>
							<p class="tip-info">可上传营业执照或者版权，证明或者主题关联证明</p>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==3||obj.business_type==6||obj.business_type==7">
					<div class="form-item">
						<p class="form-item-title">致电导语：</p>
						<div class="form-item-content" style="width: 330px;padding-top: 11px;">
							<el-input type="textarea" placeholder="请输入内容" rows="4" resize="none" v-model="obj.content"></el-input>
							<p class="tip-info">例如：欢迎致电***公司，咨询业务请按1，订购产品请按2…</p>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title" style="color: red;text-align: right;">说明：</p>
						<div class="form-item-content" style="color: red;">
							开通语音导航前，请先开通基础彩铃功能
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">转接设置：</p>
						<div class="form-item-content" style="width: 440px;">
							<el-table class="speakset-table" size="mini" border :data="speakset" style="width: 100%">
								<el-table-column prop="tnum" width="60px" label="按键号">
									<template slot-scope="scope">
										<el-input placeholder="请输入" size="mini" v-model="speakset[scope.$index].tnum"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tcontent" min-width="110px" label="转接内容">
									<template slot-scope="scope">
										<el-input type="input" placeholder="请输入转接内容" size="mini" v-model="speakset[scope.$index].tcontent"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tphone" min-width="110px" label="转接号码1">
									<template slot-scope="scope">
										<el-input type="input" placeholder="请输入手机号" size="mini" v-model="speakset[scope.$index].tphone"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tphonetwo" min-width="110px" label="转接号码2">
									<template slot-scope="scope">
										<el-input type="input" placeholder="请输入手机号" size="mini" v-model="speakset[scope.$index].tphonetwo"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="40px">
									<template slot-scope="scope">
										<el-button size="mini" v-if="scope.$index>0" type="text" @click="delNumber(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<span class="edit-btn" @click="addNumber">添加</span>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==1||obj.business_type==9">
					<div class="form-item">
						<p class="form-item-title">功能费：</p>
						<div class="form-item-content">
							<div>{{obj.functionfee?24:0}}元<span class="red">（400开通首年，功能费0元；次年收取24元/年）</span></div>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">短信套餐：</p>
						<div class="form-item-content">
							<div class="clear">
								<span class="package-item" @click="gjTypeChange(index)" :class="obj.gj_type==(index+1)?'selected-item':''" v-for="(item,index) in gjTypeList">{{item}}</span>
							</div>
							<p class="red">办理当月赠送200条短信免费使用，67个字符为1条</p>
						</div>
					</div>
					<div class="form-item" v-if="obj.business_type==9">
						<p class="form-item-title">手机号码：</p>
						<div class="form-item-content">
							<el-input placeholder="请输入手机号码" v-model="obj.remindphone"></el-input>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">短信模板：</p>
						<div class="form-item-content" style="width: 450px;padding-top: 11px;">
							<div class="template-list">
								<p class="template-item" :class="templateIndex===0?'selected-item':''" @click="selectTemplate(0)" v-if="obj.business_type==1&&type==1">
									{{companyName}}，感谢您的来电，我们将继续为您提供最优质的服务，谢谢！地址<el-input show-word-limit :maxlength="addressLength" size="mini" style="width:180px;display: inline-block;margin: 0 4px;" v-model="address" placeholder="请输入公司名称"></el-input>。服务热线:{{tel}}，退订回T。
								</p>
								<p class="template-item" :class="templateIndex===index?'selected-item':''" @click="selectTemplate(index)" v-if="(obj.business_type==1&&type==2)||(obj.business_type==1&&type==1&&index>0)" v-for="(item,index) in gdTemplateList[type-1]">
									{{item}}
								</p>
								<p class="template-item" :class="templateIndex===index?'selected-item':''" @click="selectTemplate(index)" v-if="obj.business_type==9" v-for="(item,index) in ldTemplateList[type-1]">
									{{item}}
								</p>
							</div>
						</div>
					</div>
				</template>
				<div class="form-item" v-if="obj.business_type==12">
					<p class="form-item-title">总机号码：</p>
					<div class="form-item-content">
						<el-input placeholder="请输入总机号码" v-model="obj.mainphone"></el-input>
					</div>
				</div>
			</div>
			<div class="dialog-btn-wrap text-center">
				<el-button type="default" @click="editVisible=false">取 消</el-button>
				<el-button type="primary" @click="createOrder">确 认</el-button>
			</div>
		</el-dialog>

		<el-dialog class="pay-dialog" title="支付" top="30vh" :visible.sync="payVisible" width="360px">
			<div class="dialog-content">
				
				<div class="form-item">
					<p class="form-item-title">订购业务：</p>
					<div class="form-item-content">
						{{bussinessList[obj.business_type-1]}}
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type==1||obj.business_type==9">
					<p class="form-item-title">功能费：</p>
					<div class="form-item-content">
						<span v-if="!feeObj.functionfee">0元</span>
						<span v-else>24元</span>
					</div>
				</div>
				<p class="red" v-if="obj.business_type==1||obj.business_type==9" style="font-size: 12px;margin-bottom: 4px;">(400开通首年，功能费0元；次年收取24元/年)</p>
				<div class="form-item" v-if="obj.business_type==16">
					<p class="form-item-title">标准价格：</p>
					<div class="form-item-content">
						<p style="position: relative;">
							24元/年
						</p>
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type!=16">
					<p class="form-item-title">{{obj.business_type!=1&&obj.business_type!=9?'标准价格：':'短信套餐：'}}</p>
					<div class="form-item-content">
						<p style="position: relative;" v-if="obj.business_type!=1&&obj.business_type!=9">
							{{feeObj.oldfee/100}}元/年
							<span class="discount-tag flex flex-justify-center" v-if="obj.business_type==16&&!feeObj.functionfee"><font style="zoom: 0.8;">首年优惠</font></span>
						</p>
						<span v-else>{{gjTypeList[obj.gj_type-1]}}</span>
						
					</div>
				</div>
				<p class="red" v-if="[1,9,12,16].indexOf(obj.business_type)==-1" style="font-size: 12px;margin-bottom: 4px;">(400号码开通30天内订购{{feeObj.fee/100}}元，30天后订购{{feeObj.oldfee/100}}元)</p>
				<p class="red" v-if="obj.business_type==16" style="font-size: 12px;margin-bottom: 4px;">(400号码开通1年内订购0元，1年后订购24元)</p>
				<div class="form-item">
					<p class="form-item-title">订单金额：</p>
					<div class="form-item-content">
						<span>{{(feeObj.fee+feeObj.functionfee)/100}}元</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<span>{{discount/100}}元</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">实付金额：</p>
					<div class="form-item-content">
						<span class="red">{{(feeObj.fee+feeObj.functionfee-discount)/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="feeObj.fee+feeObj.functionfee>0">
					<p class="form-item-title edit-btn" @click="selectCouponVisible=true" style="width: auto;">使用代金券或者抵扣券</p>
				</div>
				<div class="dialog-btn-wrap text-center">
					<el-button type="default" @click="payVisible=false">取 消</el-button>
					<el-button type="primary" @click="confirmPay">支 付</el-button>
				</div>
			</div>

		</el-dialog>

		<el-dialog top="30vh" :visible.sync="reOrderVisible" width="30%">
			<p><i class="el-icon-info"></i>当前号码已开通【{{bussinessList[obj.business_type-1]}}】业务，无需重复操作。</p>
			<div class="dialog-btn-wrap text-center">
				<el-button type="primary" @click="reOrderVisible=false">关 闭</el-button>
			</div>
		</el-dialog>

		<coupon ref="coupon" style="z-index: 99999;" :id="payObj.ticketuid" :show="selectCouponVisible" @closeCoupon="closeCoupon" @select="selectCoupon"></coupon>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	import change from '@/assets/images/change.png'
	import del from '@/assets/images/del.png'
	import Coupon from '@/components/Coupon'
	import ImageUploader from '@/components/ImageUploader'
	import { phoneReg, deepClone, getURLQueryString } from '@/utils/common'
	export default {
		name: 'ValueAddedService',
		components: {
			Coupon,
			ImageUploader,
		},
		data() {
			return {
				change,
				del,
				
				tel:'',
				companyName:'',
				address:'',
				templateIndex:'',
				network: false,
				type: getURLQueryString('source') || 1,
				editVisible: false,
				payVisible: false,
				reOrderVisible: false,
				selectCouponVisible: false,
				reOrderFlag: false,
				discount: 0, //优惠券优惠金额
				bussinessList: ['挂机短信', '企业彩铃', 'IVR语音导航', '企业炫铃', '遇忙彩铃', '高级语音导航', '0键直通导航', '留言信箱', '漏电短信', '满意度调查', '通话录音', '中继功能', '来电记忆', '关闭来电显示', '在线呼转','来电提示彩铃'],
				gjTypeList: ['100元/1600条', '300元/5000条', '500元/8300条'],
				gdTemplateList: [
					['【公司全称】，感谢您的来电，我们将继续为您提供最优质的服务，谢谢！地址【公司地址】。服务热线:【400号码】，退订回T。',
						'感谢您致电【公司全称】，咨询电话：【400号码】，退订回T。',
						'【公司全称】，感谢您的来电，我们将竭诚为您提供最优质的服务！服务热线:【400号码】，退订回T。'
					],
					['感谢您的来电，谢谢!', '感谢您致电【公司全称】，我们以专心、专注、专业的态度为您服务，期待您成为我们的忠实客户！如需帮助，请致电：【400号码】'],
				],
				ldTemplateList: [
					['亲爱的【400号码】用户， 您错过了{主叫号码}在{拨打时间}给您的来电，退订回T！',
					'亲爱的【400号码】用户，{拨打时间}号码为{主叫号码}拨打您的电话，退订回T！',
					'亲爱的【400号码】用户，{主叫号码}在{拨打时间}给您来电未接，退订回T！',
					],
					['{主叫号码}电话于{拨打时间}致电我司400电话，来电漏接，请速联系。']
				],
				obj: {
					fourhundred_order_uid: getURLQueryString('fourhundred_order_uid'),
					business_type: '',
					content: '',
					gj_type: '',
					remindphone: '',
					ring_file: '',
					zz_file: '',
					ring_file_name: '',
					speakset: '',
					mainphone: '',
				},
				speakset: [],
				feeObj: {},
				payObj: {},
				openStateMap: {1:{},9:{}},
				orderNumberMap: {1:{},9:{}},
				list1: //尚景
					[{
						type: '彩铃宣传',
						typeLength: 2,
						business_type: 2,
						serviceName: '企业彩铃',
						desc: '企业的有声名片，用个性语音代替单调铃声，在等待接通时间里，向客户传达企业真实信息，增加信任。',
						example: '客户拨打400电话，听到一段语音“您好，欢迎致电话我公司，我们将竭诚为您服务，电话接通中，请稍后....”',
						priceText: ['12元/年'],
						priceDesc: '自开通开始计算，1个月内0元；1个月后收费',
					}, {
						type: '彩铃宣传',
						business_type: 4,
						serviceName: '企业炫铃',
						desc: '根据企业自身需求灵活设置不同的时间段（如上下班时间，节假日、营销活动日等）定制不同的彩铃。',
						example: '上班时间和下班时间播放不同彩铃，上班播放欢迎词；下班播放“现在属于非工作时间，感谢您的来电，我们将会于明早9点给您回电”。',
						priceText: ['48元/年'],
					}, {
						type: '语音导航',
						typeLength: 1,
						business_type: 3,
						serviceName: 'IVR语音导航',
						desc: '根据客户拨打400来电的按键选择，自动为客户提供相应服务支持，提高服务效率。',
						example: '当用户拨打400时，将听到“您好，欢迎致电400*******，话费积分查询及密码服务请按1，业务咨询办理请按2，如需帮助请按0。”',
						priceText: ['48元/年'],
						priceDesc: '自开通开始计算，1个月内0元；1个月后收费',
					}, {
						type: '短信提醒',
						typeLength: 3,
						business_type: 1,
						serviceName: '挂机短信',
						desc: '帮助企业及时对挂机或漏接来电进行短信提醒，不错过任何一个电话，不错过任何一个商机。',
						example: '模板1：感谢您的来电，谢谢!<br/>模板2：感谢您致电【公司名称】，我们以专心、专注、专业的态度为您服务，期待您成为我们的忠实客户！如需帮助，请致电：【400号码】',
						priceText: ['100元/1600条', '300元/5000条', '500元/8300条'],
						priceDesc: '办理当月赠送200条短信免费使用，64个字符为一条',
					}, {
						type: '短信提醒',
						business_type: 8,
						serviceName: '留言信箱',
						desc: '遇忙线或无应答时，系统可提示用户留言或等待。亦可设置留言导航按键，方便及时回复客户电话。',
						example: '默认提示音：你所拨打的电话现在不方便接听，请在滴声后留言。',
						priceText: ['48元/年'],
					}, {
						type: '短信提醒',
						business_type: 9,
						serviceName: '漏电短信',
						desc: '对于未接通的来电，可发送提醒短信至指定的手机号上，发送短信费用另计。',
						example: '模板：{主叫号码}电话于{拨打时间}致电我司400电话，来电漏接，请速联系。',
						priceText: ['100元/1600条', '300元/5000条', '500元/8300条'],
						priceDesc: '办理当月赠送200条短信免费使用，64个字符为一条',
					}, {
						type: '客服坐席',
						typeLength: 2,
						business_type: 11,
						serviceName: '通话录音',
						desc: '每一个400电话来电通话全程录音，帮助企业监督客服服务质量，也为处理客户纠纷、投诉提供证据。',
						example: '推荐彩铃提示：为了保证服务质量，您的通话将被录音，敬请谅解。',
						priceText: ['48元/年'],
					}, {
						type: '客服坐席',
						business_type: 10,
						serviceName: '满意度调查',
						desc: '对坐席服务人员的服务进行评价，通过此功能可以分析每个转接电话的评价数据。',
						example: '默认提示音：请您对我们服务做出评价 满意请按1  不满意请按2  一般请按3。按键之后会提示：感谢您的致电 谢谢 再见',
						priceText: ['48元/年'],
					}, ],

				list2: //尚通
					[{
						type: '彩铃宣传',
						typeLength: 4,
						business_type: 2,
						serviceName: '企业彩铃',
						desc: '企业的有声名片，用个性语音代替单调铃声，在等待接通时间里，向客户传达企业真实信息，增加信任。',
						example: '客户拨打400电话，听到一段语音“您好，欢迎致电话我公司，我们将竭诚为您服务，电话接通中，请稍后....”',
						priceText: ['12元/年'],
						priceDesc: '自开通开始计算，1个月内0元；1个月后收费',
					}, {
						type: '彩铃宣传',
						business_type: 4,
						serviceName: '企业炫铃',
						desc: '根据企业自身需求灵活设置不同的时间段（如上下班时间，节假日、营销活动日等）定制不同的彩铃。',
						example: '上班时间和下班时间播放不同彩铃，上班播放欢迎词；下班播放“现在属于非工作时间，感谢您的来电，我们将会于明早9点给您回电”。',
						priceText: ['48元/年'],
					}, {
						type: '彩铃宣传',
						business_type: 5,
						serviceName: '遇忙彩铃',
						desc: '在座席全忙时进行提示，支持客户继续等待功能，提高呼入接通率。注：如开通该功能，拨打400号码即开始计费；彩铃内容为系统默认，不可自定义设置',
						example: '当公司电话满线时，会给客户播放提示音，默认提示音为“您好您拨打的电话坐席全忙 继续等待请按1  结束请挂机。”',
						priceText: ['48元/年'],
					}, {
						type: '彩铃宣传',
						business_type: 16,
						serviceName: '来电提示彩铃',
						desc: '针对400号码或分机设置座席提示，主叫方与被叫方均可收听，如“该电话由400号码转入”',
						example: '当您正在接听电话时会听到提示“该电话通过400***95555转入”',
						priceText: ['24元/年'],
					}, {
						type: '语音导航',
						typeLength: 3,
						business_type: 3,
						serviceName: 'IVR语音导航',
						desc: '根据客户拨打400来电的按键选择，自动为客户提供相应服务支持，提高服务效率。（需开通基础彩铃功能）',
						example: '当用户拨打400时，将听到“您好，欢迎致电400*******，话费积分查询及密码服务请按1，业务咨询办理请按2，如需帮助请按0。”',
						priceText: ['48元/年'],
						priceDesc: '自开通开始计算，1个月内0元；1个月后收费',
					}, {
						type: '语音导航',
						business_type: 6,
						serviceName: '高级语音导航',
						desc: '客户呼入时，由人工直接进行导航，客户无需记住分机号码，被叫通过需求在电话机上按#*+分机号转入对应的分机后继续通话；同时可根据企业需求，设置时间段，实现人工导航与交互式语音应答之间进行自由切换。',
						example: '客户无需播任何按键，直接进入人工服务，由人工来进行对应的分机转接。上班时间由人工进行转接，下班时间客户进入自助导航，根据提示音选择要服务的分机。',
						priceText: ['48元/年'],
					}, {
						type: '语音导航',
						business_type: 7,
						serviceName: '0键直通导航',
						desc: '跨跃导航按键位数限制：在第一层导航下增加“0”分机，其他分机可设置一位及以上按键位数。',
						example: '欢迎致电**公司，客服部请拨801，业务部请拨802，查号请拨0',
						priceText: ['48元/年'],
					}, {
						type: '短信提醒',
						typeLength: 3,
						business_type: 1,
						serviceName: '挂机短信',
						desc: '帮助企业及时对挂机或漏接来电进行短信提醒，不错过任何一个电话，不错过任何一个商机。在挂机后可接收到400号码发送的致谢短信，发送短信费用另计',
						example: '模板1：感谢您的来电，谢谢!<br/>模板2：感谢您致电【公司名称】，我们以专心、专注、专业的态度为您服务，期待您成为我们的忠实客户！如需帮助，请致电：【400号码】',
						priceText: ['100元/1600条', '300元/5000条', '500元/8300条'],
						priceDesc: '办理当月赠送200条短信免费使用，64个字符为一条',
					}, {
						type: '短信提醒',
						business_type: 8,
						serviceName: '留言信箱',
						desc: '遇忙线或无应答时，系统可提示用户留言或等待。亦可设置留言导航按键，方便及时回复客户电话。所有语音留言保留30天，最大录音时长为10分钟，有默认提示音。',
						example: '默认提示音：你所拨打的电话现在不方便接听，请在滴声后留言。',
						priceText: ['48元/年'],
					}, {
						type: '短信提醒',
						business_type: 9,
						serviceName: '漏电短信',
						desc: '对于未接通的来电，可发送提醒短信至指定的手机号上，发送短信费用另计。',
						example: '模板：{主叫号码}电话于{拨打时间}致电我司400电话，来电漏接，请速联系。',
						priceText: ['100元/1600条', '300元/5000条', '500元/8300条'],
						priceDesc: '办理当月赠送200条短信免费使用，64个字符为一条',
					}, {
						type: '客服坐席',
						typeLength: 6,
						business_type: 10,
						serviceName: '满意度调查',
						desc: '对坐席服务人员的服务进行评价，通过此功能可以分析每个转接电话的评价数据。',
						example: '默认提示音：请您对我们服务做出评价 满意请按1  不满意请按2  一般请按3。按键之后会提示：感谢您的致电 谢谢 再见',
						priceText: ['48元/年'],
					}, {
						type: '客服坐席',
						business_type: 11,
						serviceName: '通话录音',
						desc: '每一个400电话来电通话全程录音，帮助企业监督客服服务质量，也为处理客户纠纷、投诉提供证据。录音文件平台保留时长为1个月。',
						example: '推荐彩铃提示：为了保证服务质量，您的通话将被录音，敬请谅解。',
						priceText: ['48元/年'],
					}, {
						type: '客服坐席',
						business_type: 12,
						serviceName: '中继功能',
						desc: '帮助企业实现企业总机与400电话的互通，支持企业总机所有功能的穿透。不限定中继线量，便于大话务量用户使用。',
						example: '适用于已有交换机的用户，能实现分机之间互播，可支持200线。',
						priceText: ['240元/年'],
					}, {
						type: '客服坐席',
						business_type: 13,
						serviceName: '来电记忆',
						desc: '根据客户来电情况判断转接，当客户第二次来电时，系统会先判断坐席人员，优先转到第一次接听该客户来电的坐席人员接听。',
						example: '默认客户来电接听人员为上一个接听该客户来电的坐席人员，可无缝对接客户需求，提升客户感知度。',
						priceText: ['48元/年'],
					}, {
						type: '客服坐席',
						business_type: 14,
						serviceName: '关闭来电显示',
						desc: '开通该功能后不显示拨打400号码的客户来电，只显示某一固定的号码；可保护客户隐私，保护企业商业机密。',
						example: '',
						priceText: ['48元/年'],
					}, {
						type: '客服坐席',
						business_type: 15,
						serviceName: '在线呼转',
						desc: '可实现通话过程中被叫坐席之间互相呼转；坐席需要设置对应工号。',
						example: '在客户通话过程中，如需要转接到同层之间其他坐席，被叫人员输入：**工号，可以转接到对应工号坐席',
						priceText: ['48元/年'],
					}, ]
			}
		},
		computed:{
			addressLength(){
				return 67-this.gdTemplateList[0][0].replace('【公司地址】','').length
			}
		},
		mounted() {
			this.queryBussinessState()
			this.queryCompanyinfo()
		},
		methods: {
			goBack(){
				this.$router.push('/400tel/valueaddedservice')
			},
			spanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if(columnIndex === 0) {
					if(row.typeLength) {
						return {
							rowspan: row.typeLength,
							colspan: 1
						};
					} else {
						return {
							rowspan: 0,
							colspan: 0
						};
					}
				}
			},
			cellStyleMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				var str = ''
				if(row.type == '语音导航' || row.type == '客服坐席') {
					str += 'background-color:#F1F1F1;'
				}
				if(columnIndex == 0) {
					str += 'border-right:1px solid #dfdfdf;'
				}
				return str
			},
			selectFile() {
				if(this.uploading) {
					return
				}
				this.$refs.file.value = ''
				this.$refs.file.click()
			},
			upload() {
				var file = this.$refs.file.files[0]

				this.uploading = true
				var formData = new FormData()
				formData.append('file', file)
				this.$request.uploadFile(formData)
					.then(res => {
						this.uploading = false
						if(res.code == 0) {
							var obj = res.objlist && res.objlist[0] ? res.objlist[0] : null
							if(!obj) {
								this.msgError('上传失败')
								return
							}
							if(obj.code == 0) {
								var url = obj.uploadpath
								this.obj.ring_file = url
								this.obj.ring_file_name = file.name
							} else {
								this.msgError(obj.msg)
							}
						} else {
							this.msgError(res.msg)
						}
					})

			},
			imageUploadSuccess(img) {
				if(img.code == 0) {
					this.obj.zz_file = img.uploadpath
				}
			},
			changeFile() {
				this.$refs.zz_file.selectFile()
			},
			delFile() {
				this.obj.zz_file = ''
			},
			selectTemplate(index){
				this.templateIndex=index
				if(this.obj.business_type==1){
					this.obj.content=this.gdTemplateList[this.type-1][index]
				}
				else{
					this.obj.content=this.ldTemplateList[this.type-1][index]
				}
			},
			delNumber(index) {
				this.speakset.splice(index, 1)
			},
			addNumber() {
				this.speakset.push({
					tnum: this.speakset.length+1,
					tcontent: '',
					tphone: '',
					tphonetwo: ''
				})
			},
			async order(business_type, index) {
				this.obj = {
					fourhundred_order_uid: getURLQueryString('fourhundred_order_uid'),
					business_type: business_type,
					content: '',
					gj_type: (business_type == 1 || business_type == 9) ? index + 1 : '',
					remindphone: '',
					ring_file: '',
					zz_file: '',
					ring_file_name: '',
					speakset: '',
					mainphone: '',
				}
				this.payObj.ticketuid = ''
				this.discount = 0
				if(business_type == 3 || business_type == 6 || business_type == 7) {
					this.speakset = [{
						tnum: 1,
						tcontent: '',
						tphone: '',
						tphonetwo: ''
					}]
				}
				await this.queryValueAddedFee()
				if([1, 2, 3, 4, 6, 7, 9, 12].indexOf(business_type) > -1) {
					this.editVisible = true
					this.templateIndex=''
					this.address=''
				} else {
					this.createOrder()
				}
			},
			gjTypeChange(index) {
				this.obj.gj_type = index + 1
				this.queryValueAddedFee()
			},
			queryValueAddedFee() {
				console.log({
						fourhundred_order_uid: this.obj.fourhundred_order_uid,
						business_type: this.obj.business_type,
						gj_type: this.obj.gj_type
					})
				return new Promise((resolve) => {
					this.$request.queryValueAddedFee({
						fourhundred_order_uid: this.obj.fourhundred_order_uid,
						business_type: this.obj.business_type,
						gj_type: this.obj.gj_type
					}).then(res => {
						if(res.code == 0) {
							this.feeObj = res
						}
						resolve()
					})
				})
			},
			createOrder() {
				if(this.network) {
					return
				}
				
				if((this.obj.business_type == 1 || this.obj.business_type == 9) && !this.obj.content) {
					this.msgError('请选择短信模板')
					return
				}
				if(this.obj.business_type == 1 &&this.type==1&&this.templateIndex===0&&!this.address) {
					this.msgError('请输入公司地址')
					return
				}
				this.obj.content=this.obj.content.replace('【公司地址】',this.address).replace(/[ ]/g,"").replace(/[\r\n]/g,"");
				if(this.obj.business_type == 9 && !this.obj.remindphone) {
					this.msgError('请输入漏电短信提醒号码')
					return
				}
				if(this.obj.business_type == 9 && !phoneReg.test(this.obj.remindphone)) {
					this.msgError('漏电短信提醒号码格式错误')
					return
				}
				if((this.obj.business_type == 2 || this.obj.business_type == 4) && !this.obj.ring_file) {
					this.msgError('请上传铃音文件')
					return
				}
				if((this.obj.business_type == 2 || this.obj.business_type == 4) && !this.obj.content) {
					this.msgError('请输入彩铃内容')
					return
				}
				if((this.obj.business_type == 3 || this.obj.business_type == 6 || this.obj.business_type == 7) && !this.obj.content) {
					this.msgError('请输入致电导语')
					return
				}
				if(this.obj.business_type == 3 || this.obj.business_type == 6 || this.obj.business_type == 7) {
					for(var i = 0; i < this.speakset.length; i++) {
						if(this.speakset[i].tnum === '' || this.speakset[i].tcontent === '' || !this.speakset[i].tphone) {
							this.msgError('请完整填写转接设置内容')
							return
						}
						if(!/^\d$/.test(this.speakset[i].tnum)) {
							this.msgError('按键号需为0-9的数字')
							return
						}
						if(!/^\d{6,}$/.test(this.speakset[i].tphone)) {
							this.msgError('转接号码' + this.speakset[i].tphone + '格式错误')
							return
						}
						if(this.speakset[i].tphonetwo && !/^\d{6,}$/.test(this.speakset[i].tphonetwo)) {
							this.msgError('转接号码' + this.speakset[i].tphonetwo + '格式错误')
							return
						}
					}

					this.obj.speakset = JSON.stringify(this.speakset)
				}

				if(this.obj.business_type == 12 && !this.obj.mainphone) {
					this.msgError('请输入总机号码')
					return
				}
				console.log(this.obj)
				var formData = {}
				for(var key in this.obj) {
					if(this.obj[key] || this.obj[key] === 0) {
						formData[key] = this.obj[key]
					}
				}
				this.network = true
				this.$request.addValueAdded(formData)
					.then(res => {
						if(res.code == 0) {
							this.payObj.ordernum = res.ordernum
							this.queryBussinessState()
							this.editVisible = false
							this.payVisible = true
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			async payOrder(business_type, index){
				this.discount = 0
				if(business_type==1||business_type==9){
					this.payObj={
						ordernum:this.orderNumberMap[business_type][index+1],
						ticketuid:''
					}
					this.obj={
						fourhundred_order_uid: getURLQueryString('fourhundred_order_uid'),
						business_type:business_type,
						gj_type:index+1
					}
				}else{
					this.payObj={
						ordernum:this.orderNumberMap[business_type],
						ticketuid:''
					}
					this.obj={
						fourhundred_order_uid: getURLQueryString('fourhundred_order_uid'),
						business_type:business_type,
					}
				}
				await this.queryValueAddedFee()
				this.payVisible = true
			},
			confirmPay() {
				if(this.network) {
					return
				}
				this.$request.payValueAddedOrder(this.payObj)
					.then(res => {
						if(res.code == 0) {
							this.msgSuccess(this.bussinessList[this.obj.business_type - 1] + '业务已提交开通')
							this.payVisible = false
							this.queryBussinessState()
							setTimeout(() => {
								this.back()
							}, 1500)
						} else {
							this.msgError(res.msg)
						}
						this.network = false
					})
			},
			queryBussinessState() {
				this.$request.verifyIsOpen({
					fourhundred_order_uid: this.obj.fourhundred_order_uid,
				}).then(res => {
					if(res.code == 0) {
						var list = res.products
						var map = {
							1:{},
							9:{}
						}
						this.orderNumberMap={
							1:{},
							9:{}
						}
						list.forEach(item => {
							if(item.business_type!=1&&item.business_type!=9){
								map[item.business_type] = item.open_or_pendding
								this.orderNumberMap[item.business_type]=item.ordernum
							}
							else{
								map[item.business_type][item.gj_type]=item.open_or_pendding
								this.orderNumberMap[item.business_type][item.gj_type]=item.ordernum
							}
						})
						this.openStateMap = map
					}
				})
			},
			queryCompanyinfo(){
				this.$request.queryCompanyinfo({
					fourhundred_order_uid: this.obj.fourhundred_order_uid,
				}).then(res => {
					if(res.code == 0) {
						this.companyName=res.company_name
						this.tel=res.fourhundred_tel_num
						for(var i=0;i<this.gdTemplateList.length;i++){
							for(var j=0;j<this.gdTemplateList[i].length;j++){
							this.gdTemplateList[i][j]=this.gdTemplateList[i][j].replace('【公司全称】',this.companyName).replace('【400号码】',this.tel)
							}
						}
						for(var i=0;i<this.ldTemplateList.length;i++){
							for(var j=0;j<this.ldTemplateList[i].length;j++){
							this.ldTemplateList[i][j]=this.ldTemplateList[i][j].replace('【公司全称】',this.companyName).replace('【400号码】',this.tel)
							}
						}
					}
				})
			},
			selectCoupon(coupon) {
				this.discount = coupon.discount_ticket_price
				this.payObj.ticketuid = coupon.discount_myticket_uid
			},
			closeCoupon() {
				this.selectCouponVisible = false
			}
		}
	}
</script>

<style scoped="" lang="scss">
	.page {
		.table-wrap {
			padding-bottom: 40px;
		}
		>>>.el-table {
			border: 1px solid #dfdfdf;
			th {
				background: #F1F1F1;
				>.cell {
					text-align: center;
					font-size: 14px;
				}
			}
			td,
			th.is-leaf {
				border-bottom: 1px solid #dfdfdf;
			}
			td {
				>.cell {
					text-align: center;
					line-height: 16px;
					.order-btn {
						min-width: 120px;
						height: 26px;
						text-align: center;
						color: #fff;
						font-size: 12px;
						display: block;
						padding: 0 4px;
						line-height: 26px;
						border-radius: 2px;
						cursor: pointer;
						margin: 0 auto 5px;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
	
	.pay-dialog {
		.form-item-content {
			font-weight: bold;
		}
	}
	
	>>>.el-dialog__body {
		padding: 16px 16px 20px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 300px;
			padding: 10px 20px;
			.tip-info {
				font-size: 12px;
				color: red;
				line-height: 24px;
			}
			.form-item {
				display: block;
				margin-right: 0;
				margin-bottom: 0;
				.edit-btn {
					line-height: 36px;
					color: #409EFF;
					text-decoration: underline;
					cursor: pointer;
				}
				.form-item-title {
					width: 70px;
					line-height: 36px;
					padding-right: 0;
					text-align: left;
				}
				.form-item-content {
					width: auto;
					color: #333;
					line-height: 36px;
					.detail-info2 {
						color: #666;
					}
					.discount-tag{
						width: 46px;
						height: 16px;
						text-align: center;
						background: red;
						border-radius: 3px;
						font-size: 12px;
						color: #fff;
						font-weight: normal;
						position: relative;
						line-height: 16px;
						position: absolute;
						left: 55px;
						top: 5px;
						&:after{
							content: '';
							width: 0;
							height: 0;
							border-right: 3px solid red;
							border-top:3px solid transparent;
							border-bottom: 3px solid transparent;
							position: absolute;
							left: -3px;
							bottom: 4px;
							
						}
					}
					.template-list{
						.template-item{
							border: 1px solid #eee;
							border-radius: 4px;
							padding:5px 12px;
							font-size: 14px;
							color: #666;
							line-height: 24px;
							cursor: pointer;
							margin-bottom: 12px;
							transition: all .3s;
						}
						.selected-item{
							background: 1px solid #0088EA;
							border: 1px solid #0088EA;
							color: #fff;
						}
					}
					.package-item {
						width: 120px;
						height: 36px;
						background: #FFFFFF;
						border: 1px solid #ADADAD;
						border-radius: 2px;
						text-align: center;
						line-height: 34px;
						font-size: 14px;
						color: #333;
						cursor: pointer;
						float: left;
						margin-right: 20px;
					}
					.selected-item {
						color: #fff;
						background: #0088EA;
						border: 1px solid #0088EA;
					}
					.el-icon-info {
						font-size: 20px;
						color: #0088EA;
					}
					.speakset-table {
						margin-top: 8px;
						.cell {
							padding: 0 4px;
							text-align: center;
							.el-input__inner {
								padding-left: 4px;
							}
						}
					}
					.img-wrap {
						width: 100px;
						height: 100px;
						background: #F1F1F1;
						img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
					.upload-wrapper {
						width: 80px;
						height: 80px;
						background: #F1F1F1;
						position: relative;
						>img {
							width: 100%;
							height: 100%;
						}
						.upload-bg {
							width: 100%;
							height: 100%;
							background: url(../../assets/images/400Tel/myadd.png) center no-repeat;
							background-size: 18px 18px;
							border: 1px dashed #ADADAD;
							.img-tip {
								color: #ccc;
								font-size: 14px;
								line-height: 20px;
								padding-top: 12px;
								text-align: center;
							}
						}
						.upload-cover {
							border: none;
						}
						&:hover {
							.operate-wrap {
								display: flex;
							}
						}
						.operate-wrap {
							position: absolute;
							width: 100%;
							height: 24px;
							left: 0;
							bottom: 0;
							background: rgba(255, 0, 0, 0.8);
							opacity: 0.8;
							display: none;
							padding: 0 10px;
						}
						.operate-wrap .operate {
							width: 20px;
							height: 20px;
							cursor: pointer;
						}
					}
				}
			}
			.use-coupon {
				text-align: center;
				color: #409EFF;
				text-decoration: underline;
				line-height: 32px;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.dialog-btn-wrap {
			padding-top: 20px;
		}
	}
</style>